<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../../lib/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" type="text/css" href="../../lib/dojo/dojo/resources/dojo.css">
        <script src="../../lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true,parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dojox.widget.BarGauge");
            dojo.require('dojox.widget.gauge.BarIndicator');
        </script>
    </head>
    <body class="tundra">
        ตัวอย่าง A partial circle gauge with two indicators
        <div dojoType="dojox.widget.BarGauge" id="declarativeGauge" width="300"
             height="55" dataHeight="25" dataWidth="275" dataX="10" dataY="25" useRangeStyles="0"
             hideValues="true" majorTicks="{length: 5, width: 1, offset: -5, interval: 5}"
             background="{
             type: 'linear',
             x1: 0,
             x2: 0,
             y1: 55,
             y2: 0,
             colors: [{offset: 0, color: '#ECECEC'}, {offset: 1, color: 'white'}]
             }">
            <div dojoType="dojox.widget.gauge.Range" low="5" high="10" hover="5 - 10"
                 color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#606060'}, {offset: 1, color: '#707070'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range1" low="10" high="20"
                 hover="10 - 20" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#707070'}, {offset: 1, color: '#808080'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range2" low="20" high="30"
                 hover="20 - 30" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#808080'}, {offset: 1, color: '#909090'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range3" low="30" high="40"
                 hover="30 - 40" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#909090'}, {offset: 1, color: '#A0A0A0'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range4" low="40" high="50"
                 hover="40 - 50" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#A0A0A0'}, {offset: 1, color: '#B0B0B0'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range5" low="50" high="60"
                 hover="50 - 60" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#B0B0B0'}, {offset: 1, color: '#C0C0C0'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range6" low="60" high="70"
                 hover="60 - 70" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#C0C0C0'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.Range" id="range7" low="70" high="75"
                 hover="70 - 75" color="{
                 'type': 'linear',
                 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}]
                 }">
            </div>
            <div dojoType="dojox.widget.gauge.BarLineIndicator" id="target" value="6"
                 color="#D00000" width="3" hover="Target: 6" title="Target">
            </div>
            <div dojoType="dojox.widget.gauge.BarIndicator" id="value" value="17"
                 length="135" width="3" hover="Value: 17" title="Value">
            </div>
        </div>
    </body>
</html>
